<template>
  <div class="search-book">
    <h3 class="search-book-title">历史搜索</h3>
    <div class="search-book-list">
      <div class="search-book-list-tag" v-for="(item, index) in historyKeyList" :key="index" @click="handleChooseTag(item)">
        {{ item }}
      </div>
    </div>
    <h3 class="search-book-title">热门搜索</h3>
    <div class="search-book-list">
      <div class="search-book-list-tag" v-for="(item, index) in hotKeyList" :key="index" @click="handleChooseTag(item)">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        historyKeyList: []
      }
    },
    props: ['hotKeys'],
    computed: {
      hotKeyList() {
        const { hot = [] } = this.hotKeys
        return hot
      }
    },
    onLoad() {
      const historyKeyList = wx.getStorageSync('historyKey')
      this.historyKeyList = (historyKeyList || []).slice(0, 10)
    },
    methods: {
      handleChooseTag(text) {
        this.$emit('updateSearchText', text)
      }
    },
  }
</script>

<style scoped>
.search-book {
  padding: 20rpx;
}
.search-book-title {
  padding-left: 20rpx;
  border-left: 5px solid;
}
.search-book-list {
  padding: 0 25rpx;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50rpx;
}
.search-book-list-tag {
  padding: 0 20rpx;
  background-color: #eee;
  color: #bbb;
  font-size: 28rpx;
  margin: 20rpx 20rpx 0 0;
}
</style>